/**
 * 退改说明
 * @email 626097912@qq.com
 * Created by dength on 2017/05/15
 */
import React, { Component, PropTypes } from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
} from 'react-native';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import BaseComponent from '../base/baseComponent';

const data = [
    ("一、退票说明:"),
    ("1、在线退票时间："), ("06:00-22:55"), ("（其他时间须去火车站窗口办理）"),
    ("2、发车前35分钟，且未取票可在“订单详情”中申请退票。（配送票订单若需退票，在收到车票后去车站窗口办理）"),
    ("3、退票手续费："),
    ("手续费按退票时间梯次收取："),
    ("开车前15天（不含）以上，不收取退票费；"),
    ("开车前48小时以上，手续费5%；"),
    ("开车前24-48小时，手续费10%； "),
    ("开车前24小时内，手续费20%；"),
    ("最终退款以铁路局实退为准。"),
    ("选择保险的订单在退票成功后会退保险。"),
    ("二、改签说明："),
    ("1、在线改签时间："), ("06:00-22:55 "), ("（其他时间须去火车站窗口办理。）"),
    ("2、发车前35分钟，且未取票可在“订单详情”中申请改签（配送票订单若需改签，在收到车票后去车站窗口办理）"),
    ("3、开车之后，旅客仍可尝试改签至票面当天有余票的其他车次，但只能在票面发站办理改签，且开车后改签的车票不能退票"),
    ("改签后车票日期在春运期间的，退票时一律按票面价20%核收退票费"),
    ("4、改签限制："),
    ("暂不支持卧铺票和高于原车票票价的改签；"),
    ("开车前49小时（不含）以上，可改签预售期内的其他列车；开车前49小时内，不可改签发车日期次日的车票；"),
    ("改签只能改签一次。"),

]

class TgExplain extends BaseComponent {
    constructor(props) {
        super(props);
    }

    getNavigationBarProps() {
        return {
            title: '退改说明',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    renderBody() {
        return (
            <View style={styles.modalStyle}>
                <ScrollView showsVerticalScrollIndicator={false}>
                    <View style={{marginBottom:50}}>
                        <View style={styles.subView}>
                            <View style={{ marginTop: 16, marginBottom: 8 }}>
                                <Text style={{ fontSize: 13, color: CommonStyles.colors.commonOrange }}>{data[0]}</Text>
                            </View>
                            <View style={styles.subView_ul}>
                                <Text style={styles.subView_li}>
                                    {data[1]}
                                    <Text style={{ color: CommonStyles.colors.commonOrange }}>{data[2]}</Text>
                                    {data[3]}
                                </Text>
                            </View>
                            <View style={styles.subView_ul}>
                                <Text style={styles.subView_li}>
                                    {data[4]}
                                </Text>
                            </View>
                            <View style={styles.subView_ul}>
                                <Text style={styles.subView_li}>
                                    {data[5]}
                                </Text>
                            </View>
                            <View style={{ marginLeft: 11 }}>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[6]}
                                    </Text>
                                </View>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[7]}
                                    </Text>
                                </View>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[8]}
                                    </Text>
                                </View>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[9]}
                                    </Text>
                                </View>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[10]}
                                    </Text>
                                </View>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[11]}
                                    </Text>
                                </View>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[12]}
                                    </Text>
                                </View>
                            </View>
                            <View style={{ marginTop: 12, marginBottom: 8 }}>
                                <Text style={{ fontSize: 13, color: CommonStyles.colors.commonOrange }}>{data[13]}</Text>
                            </View>
                            <View style={styles.subView_ul}>
                                <Text style={styles.subView_li}>
                                    {data[14]}
                                    <Text style={{ color: CommonStyles.colors.commonOrange }}>{data[15]}</Text>
                                    {data[16]}
                                </Text>
                            </View>
                            <View style={styles.subView_ul}>
                                <Text style={styles.subView_li}>
                                    {data[17]}
                                </Text>
                            </View>
                            <View style={styles.subView_ul}>
                                <Text style={styles.subView_li}>
                                    {data[18]}
                                </Text>
                            </View>
                            <View style={styles.subView_ul}>
                                <Text style={styles.subView_li}>
                                    {data[19]}
                                </Text>
                            </View>
                            <View style={styles.subView_ul}>
                                <Text style={styles.subView_li}>
                                    {data[20]}
                                </Text>
                            </View>
                            <View style={{ marginLeft: 11 }}>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[21]}
                                    </Text>
                                </View>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[22]}
                                    </Text>
                                </View>
                                <View style={styles.subView_ul}>
                                    <Text style={styles.subView_li}>
                                        {data[23]}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    modalStyle: {
        backgroundColor: '#E9EEF3',
        flex: 1,
    },
    subView: {
        marginLeft: 15, marginRight: 15,
    },
    subView_ul: {
        // paddingTop: 3, paddingBottom: 3
    },
    subView_li: {
        fontSize: 10, color: '#36353A',lineHeight: 22, 
    }
});

export default TgExplain;